<%--
  Created by IntelliJ IDEA.
  User: weter
  Date: 2023/6/16
  Time: 13:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="order by dede58.com" name="author"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Float-Admin</title>

    <!-- Common plugins -->
    <link href="${pageContext.request.contextPath}../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/simple-line-icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/pace.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/nanoscroller.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/metismenu.min.css" rel="stylesheet">
    <!-- dataTables -->
    <link href="${pageContext.request.contextPath}../../static/css/jquery.datatables.min.css" rel="stylesheet"
          type="text/css">
    <link href="${pageContext.request.contextPath}../../static/css/responsive.bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <!--template css-->
    <link href="${pageContext.request.contextPath}../../static/css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}../../static/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}../../static/js/respond.min.js"></script>
    <![endif]-->


</head>
<body>
<section class="main-content" style="margin-left: 0px; padding: 0;width: 1210px;height: 702px">

    <!--page header start-->
    <div class="page-header">
        <div class="row">
            <div class="col-sm-6">
                <h4>Products</h4>
            </div>
            <div class="col-sm-6 text-right">
                <ol class="breadcrumb">
                    <li><a href="javascript: void(0);"><i class="fa fa-home"></i></a></li>
                    <li>E-commerce</li>
                    <li>Products</li>
                </ol>
            </div>
        </div>
    </div>
    <!--page header end-->


    <!--start page content-->

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <table id="datatable1" class="table table-striped dt-responsive nowrap table-hover">
                        <thead>
                        <tr id="t1">
                            <th style="width:200px">
                                <strong>生产订单编号</strong>
                            </th>
                            <th style="width:200px">
                                <strong>产品名称</strong>
                            </th>
                            <th style="width:200px">
                                <strong>产品种类</strong>
                            </th>
                            <th style="width:200px">
                                <strong>产品原材料</strong>
                            </th>
                            <th style="width:200px">
                                <strong>所需产品数量</strong>
                            </th>
                            <th style="width:200px">
                                <strong>订单创建时间</strong>
                            </th>
                            <th style="width:200px">
                                <strong>生产订单状态</strong>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="${pageContext.request.contextPath}../../static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/pace.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jasny-bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.nanoscroller.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/metismenu.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/float-custom.js"></script>

<!-- Datatables-->
<script src="${pageContext.request.contextPath}../../static/js/jquery.datatables.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/datatables.responsive.min.js"></script>
<script>
    function isNullOrEmpty(str) {
        if (str == null || str == "") {
            return true
        } else {
            return false
        }
    }

    let dataTable = $('#datatable1').DataTable({
        // 设置列定义
        columns: [
            {data: 'productionOrderCode'},
            {data: 'productName'},
            {data: 'categoryName'},
            {data: 'materialName'},
            {data: 'productNum'},
            {data: 'createTime'},
            {data: 'state'}
        ]
    });

    getProductionOrder();

    function getProductionOrder() {
        $.ajax({
            "url": "production/getProductionOrder", // 要提交的URL路径
            "type": "get", // 发送请求的方式
            "data": {}, // 要发送到服务器的数据
            "dataType": "json", // 期望接受的数据格式
            "success": function (result) { // 请求成功后要执行的代码

                if (result.code === 404) {
                    alert("没销售产品")
                } else {
                    console.log(result)
                    result = result.data
                    let Products = "";
                    for (let index in result) {

                        let statusText = ""
                        let status = result[index].state
                        if (status == 1) {
                            statusText = "待审核"
                        }else if (status == 2){
                            statusText = "审核中"
                        }else if (status == 3){
                             statusText = "生产中"
                        }else if (status == 4){
                             statusText = "完成"
                        }


                        Products += `
            <tr>
            <td>${result[index].productionOrderCode}</td>
            <td>${result[index].productName}</td>
            <td>${result[index].categoryName}</td>
            <td>${result[index].materialName}</td>
            <td>${result[index].productNum}</td>
            <td>${result[index].createTime}</td>
            <td>${statusText}</td>
            </tr>
            `
                    }
                    console.log(Products)
                    if (dataTable) {
                        dataTable.destroy(); // 销毁旧的DataTable实例
                    }
                    dataTable.rows.add(result).draw();
                    $('#datatable1 tbody').html(Products); // 更新表格数据
                    dataTable = $('#datatable1').DataTable({
                        "order": [[0, 'asc']], // 默认按第一列升序排序
                        "paging": true // 启用分页功能，根据需求设置其他分页选项
                    });
                }
            }, "error": function () {
                alert("数据响应时间过长！请重新加载")
            }
        });
    }

</script>
</body>
</html>

